<script setup lang="ts">
import { ComponentEnum } from '@/enum/ComponentEnum.ts'
import { PeaceColumn } from '@/components/type/PeaceColumn'
import { PeaceActionBtn } from '@/components/type/PeaceActionBtn'
import { ObjectUtil } from '@/util/ObjectUtil'
import { ArrayUtil } from '@/util/ArrayUtil.ts'

// 组件属性定义
const props = withDefaults(
  defineProps<{
    // 是否显示模态框
    show: boolean
    // 详情数据
    data?: Record<string, any>
    // 详情数据接口
    detailActionBtn: PeaceActionBtn
    // 列配置
    columns?: Array<PeaceColumn>
    // 模态框标题
    title?: string
  }>(),
  {
    show: false,
    title: null,
  },
)

const ifShow = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value),
})

// 组件事件
const emit = defineEmits<{
  // 关闭模态框
  (e: 'update:show', value: boolean): void
}>()

const detailColumns = ref<PeaceColumn[]>([])

// 获取可展示的列
const displayColumns = computed(() => {
  return props.columns.filter((col) => {
    // 过滤掉操作列和选择列
    if (col.key === 'tableRowAction' || col.type === 'selection') return false
    // 检查是否允许显示在详情中
    if (col.detailConfig?.peaceDetailable === false) return false
    return true
  })
})

// 获取展示值
const getDisplayValue = (col: PeaceColumn, detailData: Record<string, any>) => {
  console.log(col,"displayColumnsdisplayColumnsdisplayColumns",JSON.stringify(detailData),detailData.hasOwnProperty(col.detailConfig?.key))
  if (ObjectUtil.isNullOrUndefined(col.detailConfig?.key)){
    throw new Error("未定义字段,detailConfig?.key未定义")
  }
  if (false === detailData.hasOwnProperty(col.detailConfig?.key)){
    return "返回数据不包含该字段名: "+col.detailConfig?.key
  }
  // return 100
  // // 使用详情自定义渲染
  // if (col.detailConfig?.peaceRender) {
  //   // return h(col.detailConfig.peaceRender(value))
  //   return col.detailConfig.peaceRender(value)
  // }
  //
  // // 使用通用自定义渲染
  // if (col.peaceRender) {
  //   // return h(col.peaceRender(value))
  //   return col.peaceRender(value)
  // }
  const value =  detailData[col.detailConfig?.key as string]
  // 处理不同类型的值
  if (col.detailConfig.componentEnum === ComponentEnum.SELECT) {
    // 处理选项数组
    if (ArrayUtil.isNotEmpty(col.detailConfig.optionConfig?.peaceOption)) {
      const option = col.detailConfig.optionConfig.peaceOption.find((opt) => {
        const keyField = col.detailConfig.optionConfig?.peaceValueField || 'value'
        return (opt as any)[keyField] === value
      })
      if (option) {
        const labelField = col.optionConfig?.peaceLabelField || 'label'
        return (option as any)[labelField]
      }
    }
    // 处理枚举类型
    if (col.detailConfig.optionConfig?.enum && col.detailConfig.optionConfig?.enumLabel) {
      const enumValue = col.detailConfig.optionConfig.enum[value as keyof typeof col.detailConfig.optionConfig.enum]
      return col.detailConfig.optionConfig.enumLabel[enumValue as keyof typeof col.optionConfig.detailConfig.enumLabel]
    }
  }

  if (col.componentEnum === ComponentEnum.DATE) {
    return value ? new Date(value).toLocaleDateString() : ''
  }

  return value ?? "-"
}
const loadDetailData = async () => {
  if (props.detailActionBtn && props.detailActionBtn.api) {
    loading.value = true
    try {
      const result = await props.detailActionBtn.api({
        ...props.data,
        ...props.detailActionBtn.apiParams,
      })
      detailData.value = result as Record<string, any>
      // console.log(detailData.value,"detailDatadetailDatadetailDatadetailDatadetailDatadetailDatadetailDatadetailDatadetailDatadetailData")
    } catch (error) {
      console.error('获取详情数据失败:', error)
    } finally {
      loading.value = false
    }
  } else if (props.data) {
    detailData.value = props.data
  }
}

// 初始化详情数据
// 详情数据
const loading = ref(false)
const detailData = ref<Record<string, any>>({})
const afterEnter = async () => {
  loadDetailData()
}
</script>

<template>
  <n-modal
    v-model:show="ifShow"
    :title="title || (detailActionBtn?.name ?? '详情')"
    @after-enter="afterEnter"
    preset="card"
    style="width: 1200px"
  >
    <n-spin :show="loading">
      <n-descriptions bordered>
        <n-descriptions-item
          v-for="col in displayColumns"
          :key="col.key as string"
          :label="col.title as string"
        >
          {{ getDisplayValue(col, detailData) }}
        </n-descriptions-item>
      </n-descriptions>
    </n-spin>
  </n-modal>
</template>

<style scoped>
.n-descriptions {
  margin-bottom: 20px;
}
</style>
